import React, { useState, useMemo } from 'react'
import CommonHead from '@c/CommonHead'
import { fetchItems } from '@/api'
import { useSearchParams, useNavigate } from 'umi'
import Icon from '@c/Icon'
import './style.scss'
export default function index() {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();

  // 排序状态
  const [orderStatus, setOrderStatus] = useState({
    by: 0, // 0 销量 1 价格2 新品
    upDown: 0 // 0升序 1降序
  })
  // 切换排序 按照销量或者新品排序
  const swithOrder = (index: number) => {
    setOrderStatus({
      ...orderStatus,
      by: index
    })
  }
  const [items, setItems] = useState<any[]>([]);
  const getItems = (orderBy: string) => {
    fetchItems({
      categoryId: searchParams.get('cateId'),
      orderBy: orderBy
    }).then(res => {
      if (res.data.code === 0) {
        setItems(res.data.data.result)
      }
    })
  }
  // 点击按照价格 
  const switchOrderToPrice = () => {

    // 1 现在是按照销量或者新品， 点击 按照价格 的升序
    if (orderStatus.by !== 1) {
      setOrderStatus({
        by: 1,
        upDown: 0
      })
    } else {
      // 2现在已经按照价格排序 点击 切换升序和降序
      if (orderStatus.upDown === 0) {
        setOrderStatus({
          by: 1,
          upDown: 1
        })
      } else {
        setOrderStatus({
          by: 1,
          upDown: 0
        })
      }
    }
  }
  // 请求商品列表 排序字段的值 依赖于 orderStatus
  const orderBy = useMemo(() => {
    let _orderBy = '';
    switch (orderStatus.by) {
      case 0:
        // 按照销量降序
        _orderBy = 'ordersDown'
        break;
      case 2:
        // 按照新品
        _orderBy = 'addedDown'
        break;
      case 1:
        // 按照价格
        if(orderStatus.upDown === 0) {
          // 价格升序
          _orderBy = 'priceUp'
        }else {
          _orderBy = 'priceDown'
        }
        break;
      default:
        break;
    }
   
    getItems(_orderBy)
    return _orderBy
  }, [orderStatus])
  return (
    <div>
      <CommonHead title="商品列表" />
      <div className="order-bar">
        <div onClick={
          () => {
            swithOrder(0)
          }
        } className={`order sale ${orderStatus.by === 0 ? 'active' : ''}`}>
          <span>销量</span>
        </div>
        <div
          onClick={switchOrderToPrice}
          className={`order price ${orderStatus.by === 1 ? 'active' : ''}`}>
          <span>价格</span>
          <div className={`angle up ${(orderStatus.by === 1 && orderStatus.upDown === 0) ? 'active' : ''}`}></div>
          <div className={`angle down ${(orderStatus.by === 1 && orderStatus.upDown === 1) ? 'active' : ''}`}></div>
        </div>
        <div
          onClick={
            () => {
              swithOrder(2)
            }
          }
          className={`order new ${orderStatus.by === 2 ? 'active' : ''}`}>
          <span>新品</span>
        </div>
      </div>
      <div className="item-lists-container">
      <div className="items">

            {
              items.map(item => (
                <div 
                  className="item" 
                  onClick={
                    () => {
                      navigate(`/detail/${item.id}`)
                    }
                  }
                  key={item.id}>
                  <img src={item.pic} alt="" className="item-img" />
                  <div className="item-info">
                    <h5 className="item-name">{item.name}</h5>
                    <div className="item-action">
                      <p className="price">￥{item.minPrice}</p>
                      <Icon name="gouwuchetianjia" color="#e93323" size={24} />
                    </div>
                  </div>
                </div>
              ))
            }

          </div>
      </div>
    </div>
  )
}
